<template>
  <div>
    <div style="padding: 0 .5rem;">
      <ul class="setting-list">
        <li @click="openCitySetting = true">
          <div class="li-box">
            <span style="display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;">
              <span>{{weatherDes}}</span>
            </span>
            <span style="display: flex; align-items: center;">
            <svg t="1651655766785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2325" width="20" height="20"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="2326"></path></svg>
          </span>
          </div>
        </li>
        <li>
          <div class="li-box">
            <span style="display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;">系统音量</span>
            <SwipeNum ref="volumeInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="1" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>volumeSet(v)"></SwipeNum>
          </div>
        </li>
        <li>
          <div class="li-box">
            <span style="display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;">LED 亮度(0-15可选)</span>
            <SwipeNum ref="ledLevelInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>ledLightLevelSet(v)"></SwipeNum>
          </div>
        </li>
        <li>
          <div class="li-box">
            <span style="display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;">时钟精简模式</span>
            <switch-btn ref="ledDndSwitchInput" class="clock-switch" height="1.3rem" width="2rem" :enabled="ledDndMod.status ? 1 : 2" @on-switch="e=>onOffLedMode(e)"/>
          </div>
          <div class="li-box" style="justify-content: flex-end;" v-show="ledDndMod.status">
            <SwipeNum ref="ledModeStartHourInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>updateLedDndModeTime(1,v)"></SwipeNum>
            <span>&nbsp;:&nbsp;</span>
            <SwipeNum ref="ledModeStartMinuteInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>updateLedDndModeTime(2,v)"></SwipeNum>
            <span>&nbsp;-&nbsp;</span>
            <SwipeNum ref="ledModeEndHourInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>updateLedDndModeTime(3,v)"></SwipeNum>
            <span>&nbsp;:&nbsp;</span>
            <SwipeNum ref="ledModeEndMinuteInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>updateLedDndModeTime(4,v)"></SwipeNum>
          </div>
        </li>
        <li>
          <div class="li-box">
            <span style="display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;">整点报时静音</span>
            <switch-btn ref="clockDndSwitchInput" class="clock-switch" height="1.3rem" width="2rem" :enabled="clockDndMod.status ? 1 : 2" @on-switch="e=>onOffClockMode(e)"/>
          </div>
          <div class="li-box" style="justify-content: flex-end;" v-show="clockDndMod.status">
            <SwipeNum ref="clockModeStartHourInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>updateClockDndModeTime(1,v)"></SwipeNum>
            <span>时&nbsp;-&nbsp;</span>
            <SwipeNum ref="clockModeEndHourInput" v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  num-val="0" type="string" @update="v=>updateClockDndModeTime(2,v)"></SwipeNum>
            <span>时</span>
          </div>
        </li>
        <li @click="doShowShutdownBtn">
          <div class="li-box">
            <span style="display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;">关机</span>
            <Button class="shutdown-btn" style="background-color: #ff5858;" v-show="showShutdownBtn" @click.stop="doShutdown">
              <svg t="1651212448187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2862" width="20" height="20"><path d="M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m0 64C288.149333 106.666667 106.666667 288.149333 106.666667 512s181.482667 405.333333 405.333333 405.333333 405.333333-181.482667 405.333333-405.333333S735.850667 106.666667 512 106.666667z m-124.608 219.178666a32 32 0 1 1 35.626667 53.141334 160 160 0 1 0 178.197333 0.170666 32 32 0 0 1 35.733333-53.077333A223.786667 223.786667 0 0 1 736 512c0 123.712-100.288 224-224 224S288 635.712 288 512c0-75.605333 37.76-144.853333 99.392-186.154667zM512 266.666667a32 32 0 0 1 31.850667 28.928L544 298.666667v149.333333a32 32 0 0 1-63.850667 3.072L480 448v-149.333333a32 32 0 0 1 32-32z" fill="#ffffff" p-id="2863"></path></svg>
            </Button>
          </div>
        </li>
      </ul>
    </div>
    <weather-city-selector v-if="openCitySetting" @update="r=>citySetFinished(r)"/>
  </div>
</template>

<script>
import request from "@/requestutil"
import SwipeNum from "@/views/tools/Swipe_Num";
import switchBtn from '@/views/tools/SwitchBtn'
import WeatherCitySelector from "@/views/setting/WeatherCitySelector";
export default {
  name: "SysSetting",
  components: {
    SwipeNum,
    switchBtn,
    WeatherCitySelector
  },
  data() {
    return {
      weatherDes: '',
      openCitySetting: false,
      showShutdownBtn: false,
      ledDndMod: {
        status: false,
        startHour: 0,
        startMinute: 0,
        endHour: 0,
        endMinute: 0
      },
      clockDndMod: {
        status: false,
        startHour: 0,
        endHour: 0
      },
    }
  },
  mounted() {
    request.get("/api/setting/volume")
    .then(r=>{
      if (r.data.code == 1 ) {
        this.$refs.volumeInput.setNum(r.data.data,true)
      } else {
        window.openMsg('获取LED亮度失败：'+r.data.msg)
      }
    })
    request.get("/api/setting/light_level")
        .then(r=>{
          if (r.data.code == 1 ) {
            this.$refs.ledLevelInput.setNum(r.data.data,true)
          } else {
            window.openMsg('获取系统音量失败：'+r.data.msg)
          }
        })
    refreshWeather(this)

    request.get('/api/setting/dndInfo/1')
        .then(r=>{
          if (r.data.code == 1 ) {
            let data = r.data.data
            if (data) {
              this.ledDndMod.status = true
              this.$refs.ledDndSwitchInput.switchState(1,true)
              let startTime = data.dndStartTime || 0
              let endTime = data.dndEndTime || 0
              let startHour = parseInt(startTime / 60)
              let endHour = parseInt(endTime / 60)
              this.ledDndMod.startHour = startHour
              this.ledDndMod.endHour = endHour
              this.$refs.ledModeStartHourInput.setNum(startHour,true)
              this.$refs.ledModeEndHourInput.setNum(endHour,true)
            }
          } else {
            window.openMsg('获取LED精简模式失败：'+r.data.msg)
          }
        })


    request.get('/api/setting/dndInfo/2')
        .then(r=>{
          if (r.data.code == 1 ) {
            let data = r.data.data
            if (data) {
              this.clockDndMod.status = true
              this.$refs.clockDndSwitchInput.switchState(1,true)
              let startTime = data.dndStartTime || 0
              let endTime = data.dndEndTime || 0
              let startHour = parseInt(startTime / 60)
              let startMinute = parseInt(startTime % 60)
              let endHour = parseInt(endTime / 60)
              let endMinute = parseInt(endTime % 60)
              this.clockDndMod.startHour = startHour
              this.clockDndMod.startMinute = startMinute
              this.clockDndMod.endHour = endHour
              this.clockDndMod.endMinute = endMinute
              this.$refs.clockModeStartHourInput.setNum(startHour,true)
              this.$refs.clockModeEndHourInput.setNum(endHour,true)
            }
          } else {
            window.openMsg('获取整点报时静音模式失败：'+r.data.msg)
          }
        })
  },
  methods: {
    volumeSet(val) {
      request.post('/api/setting/volume/'+val)
      .then(r=>{
        if (r.data.code == 1) {
          window.openMsg('设置成功',true)
        } else {
          window.openMsg('设置失败')
        }
      })
    },
    citySetFinished(r) {
      this.openCitySetting = false
      if (r === 1) {
        refreshWeather(this)
      }
    },
    doShowShutdownBtn() {
      let self = this
      if (self.shutdownBtnId) {
        window.clearTimeout(self.shutdownBtnId)
      }
      this.showShutdownBtn = true
      let id = self.shutdownBtnId = window.setTimeout(()=>{
        self.showShutdownBtn = false
        if (id === self.shutdownBtnId) {
          delete self.shutdownBtnId
        }
      },2000)
    },
    ledLightLevelSet(val) {
      request.post('/api/setting/light_level/'+val)
          .then(r=>{
            if (r.data.code == 1) {
              window.openMsg('设置成功',true)
            } else {
              window.openMsg('设置失败')
            }
          })
    },
    onOffLedMode(state) {
      let opened = state == 1
      this.ledDndMod.status = opened
      if (opened) {
        request.post('/api/setting/openAndUpdateDnd',{dndType: 1, dndStartTime: 0, dndEndTime: 0})
        .then(r=>{
          if (r.data.code == 1) {
            window.openMsg('开启LED精简模式成功，可通过拨轮设置每日的开启时间，如23:00(包含) - 07:00(包含) 表示夜间开启精简模式',true)
          } else {
            window.openMsg(r.data.msg)
          }
        })
      } else {
        this.$refs.ledModeStartHourInput.setNum(0,true)
        this.$refs.ledModeStartMinuteInput.setNum(0,true)
        this.$refs.ledModeEndHourInput.setNum(0,true)
        this.$refs.ledModeEndMinuteInput.setNum(0,true)
        request.post('/api/setting/clearDnd/1')
            .then(r=>{
              if (r.data.code == 1) {
                window.openMsg('关闭LED精简模式成功',true)
              } else {
                window.openMsg(r.data.msg)
              }
            })
      }
    },
    updateLedDndModeTime(id, val) {
      val = parseInt(val)
      let ledDndMod = this.ledDndMod
      let startHour = ledDndMod.startHour || 0
      let startMinute = ledDndMod.startMinute || 0
      let endHour = ledDndMod.endHour || 0
      let endMinute = ledDndMod.endMinute || 0
      switch (id) {
        case 1:
          ledDndMod.startHour = startHour = val
          break;
        case 2:
          ledDndMod.startMinute = startMinute = val
          break;
        case 3:
          ledDndMod.endHour = endHour = val
          break;
        case 4:
          ledDndMod.endMinute = endMinute = val
      }
      let startTime = startHour * 60 + startMinute
      let endTime = endHour * 60 + endMinute
      request.post('/api/setting/openAndUpdateDnd',{dndType: 1, dndStartTime: startTime, dndEndTime: endTime})
        .then(r=>{
          if (r.data.code == 1) {
            window.openMsg('时间区间设置成功',true)
          } else {
            window.openMsg(r.data.msg)
          }
        })
    },
    onOffClockMode(state) {
      let opened = state == 1
      this.clockDndMod.status = opened
      if (opened) {
        request.post('/api/setting/openAndUpdateDnd',{dndType: 2, dndStartTime: 0, dndEndTime: 0})
            .then(r=>{
              if (r.data.code == 1) {
                window.openMsg('开启整点报时静音模式成功，可通过拨轮设置每日的开启时间，如23时(包含) - 07时(包含) 表示夜间开启静音模式',true)
              } else {
                window.openMsg(r.data.msg)
              }
            })
      } else {
        this.$refs.clockModeStartHourInput.setNum(0,true)
        this.$refs.clockModeEndHourInput.setNum(0,true)
        request.post('/api/setting/clearDnd/2')
            .then(r=>{
              if (r.data.code == 1) {
                window.openMsg('关闭LED精简模式成功',true)
              } else {
                window.openMsg(r.data.msg)
              }
            })
      }
    },
    updateClockDndModeTime(id, val) {
      val = parseInt(val)
      let clockDndMod = this.clockDndMod
      let startHour = clockDndMod.startHour || 0
      let endHour = clockDndMod.endHour || 0
      switch (id) {
        case 1:
          clockDndMod.startHour = startHour = val
          break;
        case 2:
          clockDndMod.endHour = endHour = val
          break;
      }
      let startTime = startHour * 60
      let endTime = endHour * 60
      request.post('/api/setting/openAndUpdateDnd',{dndType: 2, dndStartTime: startTime, dndEndTime: endTime})
          .then(r=>{
            if (r.data.code == 1) {
              window.openMsg('时间区间设置成功',true)
            } else {
              window.openMsg(r.data.msg)
            }
          })
    },
    doShutdown() {
      request.post('/api/setting/shutdown_system')
        .then(r=>{
          if (r.data.code == 1) {
            window.openMsg('请求关机成功',true)
          } else {
            window.openMsg('请求关机失败：'+ r.data.msg)
          }
        })
        .catch(e=>{
          window.openMsg('请求关机失败')
        })
    }
  }
}

function refreshWeather(self) {
  request.get('/api/setting/get_weather')
  .then(r=>{
    if (r.data.code == 1) {
      let w = r.data.data
      if (w && w.cityInfo) {
        let text = w.cityInfo.name1 + ' ' + w.cityInfo.name2 + ' ' + w.cityInfo.name3 + ': '
        text += w.status + '  ' +w.min + '°C - ' + w.max+'°C('+w.temp+'°C)'
        self.weatherDes = text
      } else {
        self.weatherDes = '城市设置(设置所在城市可显示天气)'
      }
    } else {
      window.openMsg('拉取天气信息失败')
    }
  }).catch(()=>{
    window.openMsg('拉取天气信息失败')
  })
}
</script>

<style scoped>
.setting-list>li {
  border-bottom: .01rem solid #EEE;
}
.setting-list>li:active {
  background-color: #EEE;
}
.setting-list>li .li-box {
  padding: .3rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shutdown-btn {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  padding: 0;
  border: none;
  outline: none;
}

.help-btn {
  margin-left: .5rem;
  width: 21px;
  height:21px;
  border-radius: 21px;
  padding:0;
  border:none;
}
</style>